<template>
    <div class="t-item">
        <template v-if="detail.modelList.length > 1">
            <div class="title">模板选择</div>
            <el-radio-group v-model="formData[detail.modelKey]"
                class="card-radio">
                <el-radio v-for="subItem in detail.modelList"
                    @change="changeRadio(detail.modelKey, detail.modelList, subItem)"
                    :key="subItem.modelKey"
                    :label="subItem.modelKey"
                    :title="subItem.modelName"
                    :disabled="props.isDisabled"
                    size="large"
                    border>{{subItem.modelName}}</el-radio>
            </el-radio-group>
        </template>
        <template v-if="detail.tagList.length > 1">
            <div class="title">标签选择</div>
            <div class="card-radio">
                <el-checkbox v-for="subItem in detail.tagList"
                    @change="changeBox(detail.modelKey, detail.tagList, subItem)"
                    :checked="subItem.checked"
                    :key="subItem.tagKey"
                    :label="subItem.tagKey"
                    :title="subItem.tagName"
                    :disabled="props.isDisabled"
                    size="large"
                    border>{{subItem.tagName}}</el-checkbox>
            </div>
        </template>
    </div>
</template>

<script setup>
import { ref, defineProps, onMounted, defineEmits } from 'vue'

const emit = defineEmits(['change-item']);

const props = defineProps({
    detail: {
        type: Object,
        default: () => {
            return {}
        }
    },
    isDisabled: {
        type: Boolean,
        default: false
    }
});


const formData = ref({});


// 单选
function changeRadio (modelKey, list, subItem) {
    list && list.forEach(item => {
         item.checked = false;
    })
    subItem.checked = true;
    emit('change-item', modelKey, list, 'modelList');
}

// 单选
function changeBox (modelKey, list, subItem) {
    subItem.checked = true;
    emit('change-item', modelKey, list, 'tagList');
}

onMounted(() => {
    let modelList = props.detail.modelList || [];
    modelList.length && modelList.forEach(item => {
        if(item.checked){
            formData.value[props.detail.modelKey] = item.modelKey;
        }
    })
 })


</script>

<style lang="scss" scoped>
.t-item {
   .title {
      font-size: 12px;
      color: #666666;
      margin: 8px 0px;
   }
}
.card-radio {
    display: flex;
    flex-wrap: wrap;
    margin-bottom: 12px;
    font-size: 14px;
    .el-radio{
        margin-bottom: 10px;
        width: calc(50% - 30px);
        margin-right: 30px;
        padding: 20px 12px;
        box-sizing: border-box;
        border: 1px solid #eeeeee;
        border-radius: 4px;
    }
    .el-checkbox {
        margin-bottom: 10px;
        width: calc(25% - 30px);
        margin-right: 30px;
        padding: 20px 12px;
        box-sizing: border-box;
        border: 1px solid #eeeeee;
        border-radius: 4px;
    }
    :deep(.el-radio__label), :deep(.el-checkbox__label) {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
}
</style>